/**
 * Created by zzy on 2017/8/22.
 */

import React, {Component} from 'react';
import {
    Text,
    View,
    TouchableOpacity,
    Image,
    StyleSheet,
    ScrollView,
    PixelRatio,
    Animated,
    WebView,
    Dimensions,
    InteractionManager
} from 'react-native';
import ViewPager from '../component/ViewPager'
import Ionicons from 'react-native-vector-icons/Ionicons';
import ItemCell from '../component/ItemCell'
import {GradientRadiusCartButton} from '../component/Button'
import RequestUtil from '../util/NetUtil'
import NetRequest from '../util/NetRequest'
import waterTiketStore from '../store/WaterTiketStore'
import {observer} from 'mobx-react/native'
import {updateItemCount} from '../home/WaterShop'

@observer
export default class ProductInfo extends Component{
    constructor(props){
        super(props);
        this.tagItem=this.props.tagItem;
        this.product=this.props.product;
        this.shopId=this.props.shopId;

    }
    componentDidMount(){
        this.fetch();

    }
    fetch(){
        InteractionManager.runAfterInteractions(() => {
            var tiketParam={
                'productItemId':this.product.pItemModels[0].productItemId
            };
            NetRequest.getTiketInfo(tiketParam).then((data)=>{
                LOG('product----------' + JSON.stringify(data));
                waterTiketStore.setProductItemModels(data)
            });
        });
    }
    _shoppingCartAction(actionType){
        updateItemCount(null,this.product,actionType);
        this.fetch();
    }
    render(){
        return <View style={{backgroundColor: '#f5f5f5',flex: 1}}>
            <ScrollView >
            <ViewPager images={[{uri:waterTiketStore.productModel.imageUrl}]}/>

                <View style={{padding: 10,backgroundColor: 'white'}}>
                     <Text style={{color:'black'}}>{waterTiketStore.productModel.name}</Text>
                    <Text style={{marginTop: 5,fontSize:12}}>已售:{waterTiketStore.productModel.productItemModels[0].saleMount}</Text>
                    <View style={{flexDirection:'row'}}>
                        <View style={{flexDirection:'row',flex:1}}>
                            <Text style={{marginTop: 7,fontSize:12,color:'red'}}>¥{waterTiketStore.productModel.productItemModels[0].currentPrice}</Text>
                            <Text style={{marginTop: 7,fontSize:12,marginLeft:10}}>原价
                                <Text style={{textDecorationLine:'line-through'}}>
                                    ¥{waterTiketStore.productModel.productItemModels[0].originalPrice}
                                </Text>
                                </Text>
                        </View>
                        <View style={{flexDirection:'row',alignItems:'center'}}>
                            {
                                waterTiketStore.productModel.productItemModels[0].selectCount==0?<GradientRadiusCartButton
                                    title="加入购物车"
                                    textStyle={{fontSize:12,color:'white',marginLeft:5}}
                                    style={{borderRadius: 15,
                                        paddingHorizontal:7,
                                        paddingVertical:5}}
                                    colors={['#14c2fc','#399cfe']}
                                    onPress={()=>{
                                        this._shoppingCartAction('increase');
                                    }}

                                />:<View style={{flexDirection:'row',alignItems:'center',marginRight:20}}>

                                    <TouchableOpacity activeOpacity={1}
                                                      onPress={()=>{
                                                          this._shoppingCartAction('decrease');
                                                      }}>
                                        <Ionicons name="ios-remove-circle" size={25} color="#1EAFF3"/>
                                    </TouchableOpacity>
                                    <Text style={{padding:8}}>{waterTiketStore.productModel.ActiveProductItemModel.selectCount+''}</Text>
                                    <TouchableOpacity activeOpacity={1}
                                                      onPress={()=>{
                                                          this._shoppingCartAction('increase');
                                                      }}>
                                        <Ionicons name="ios-add-circle" size={25} color="#1EAFF3"/>
                                    </TouchableOpacity>
                                </View>
                            }

                        </View>
                    </View>
                </View>
                <View style={{marginTop:20,backgroundColor:'white',alignItems:'center',paddingVertical:10}}>
                    <Image style={{flexDirection:'row',alignItems:'center'}} source={require('../../asserts/ticket/Commodity_details_page_s_Water_ticket_bg.png')}>
                        <View style={{flexDirection:'row',marginLeft:30}}>
                             <Image source={require('../../asserts/ticket/Commodity_details_page_s_Water_ticket_bg_left.png')}></Image>
                             <View style={{marginLeft:2}}>
                                 <Image style={{alignItems:'center',justifyContent:'center'}} source={require('../../asserts/ticket/Commodity_details_page_s_Water_ticket_bg_Upper_right.png')}>
                                     <Text style={{color:'white'}}>¥
                                       <Text style={{fontSize:25,fontWeight:'bold'}}>
                                           100
                                       </Text>
                                     </Text>
                                 </Image>
                                 <Image style={{alignItems:'center',justifyContent:'center'}} source={require('../../asserts/ticket/Commodity_details_page_s_Water_ticket_bg_Lower_right.png')}>
                                     <Text style={{color:'white',fontSize:12}}>买10赠1</Text>
                                 </Image>
                             </View>
                        </View>
                        <View style={{marginLeft:20}}>
                            <Text style={{color:'white',fontSize:18}}>水票更优惠</Text>
                            <Text style={{color:'white',fontSize:12}}>喜腾山泉天然</Text>
                            <View style={{borderRadius:3,backgroundColor:'white',width:70,marginTop:3}}>
                                <Text style={{alignSelf:'center',color:'red'}}>更多优惠</Text>
                            </View>
                        </View>
                    </Image>
                </View>
                <View style={{flexDirection:'row',backgroundColor:'white',padding:10,marginTop:20}}>

                    <Text>服务:</Text>
                    <Text style={{color:'black',marginLeft:5}}>24小时内送达</Text>
                </View>
                <View style={{flexDirection:'row',backgroundColor:'white',padding:10,marginTop:1}}>
                    <Text>押金:</Text>
                    <Text style={{color:'black',marginLeft:5}}>一些押金说明一些押金说明一些押金说明一些押金说明一些押金说明一些押金说明</Text>
                </View>
                <ShopInfo/>
            </ScrollView>
        </View>
    }
}

class ShopInfo extends Component{

    render(){
        let stars=[];
        for(let i = 0;i<=5;i++){
            stars.push( <Image key={i} style={{width:12,height:12}} source={require('../../asserts/shop/icon_star_orange.png')}></Image>)
        }
        return <View style={{backgroundColor:'white',padding:10,marginTop:20}}>

            <View style={{flexDirection:'row',alignItems:'center'}}>
                <Image style={{width:50,height:50,resizeMode:'contain'}} source={{uri:'http://www.qq745.com/uploads/allimg/141106/1-141106153Q5.png'}}></Image>
                <View style={{justifyContent:'center',marginLeft:5,flex:1}}>
                    <Text>喜腾山泉旗舰店</Text>
                    <View style={{flexDirection:'row',marginTop:3,alignItems:'center'}}>
                        {
                           stars
                        }
                        <Text style={{marginLeft:3}}>9.0</Text>
                    </View>
                </View>

                <View style={{marginRight:10,borderRadius:3, borderWidth: 3 / PixelRatio.get(),padding:3,borderColor: '#1EAFF3'}}>
                    <Text style={{color:'#1EAFF3'}}>进入店铺</Text>
                </View>
            </View>
            <View style={{flexDirection:'row',justifyContent:'center',marginTop:20}}>
                <View style={{alignItems:'center',marginRight:100}}>
                    <Text style={{color:'black'}}>20</Text>
                    <Text>全部商品</Text>
                </View>
                <View style={{alignItems:'center'}}>
                    <Text style={{color:'black'}}>2.0km</Text>
                    <Text>距离</Text>
                </View>
            </View>
        </View>
    }
}